<template>
    <div class="tab-content">
        <el-form ref="notificationFormRef" :model="notificationForm" :rules="notificationRules" label-width="150px" class="config-form">
            <el-row :gutter="12">
                <el-col :span="6">
                    <el-form-item label="三农中心" label-width="120" prop="agriculture">
                        <el-input-number v-model="notificationForm.agriculture" :min="0" placeholder="数量"
                            size="small" style="width: 120px" />
                        <!-- <span style="margin-left: 8px; color: #909399;">%</span> -->
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="物流园" label-width="120" prop="logistics">
                        <el-input-number v-model="notificationForm.logistics" :min="0" placeholder="数量"
                            size="small" style="width: 120px" />
                        <!-- <span style="margin-left: 8px; color: #909399;">%</span> -->
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="12">
                <el-col :span="6">
                    <el-form-item label="党校" label-width="120" prop="party">
                        <el-input-number v-model="notificationForm.party" :min="0" placeholder="数量"
                            size="small" style="width: 120px" />
                        <!-- <span style="margin-left: 8px; color: #909399;">%</span> -->
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="环保局" label-width="120" prop="env">
                        <el-input-number v-model="notificationForm.env" :min="0" placeholder="数量"
                            size="small" style="width: 120px" />
                        <!-- <span style="margin-left: 8px; color: #909399;">%</span> -->
                    </el-form-item>
                </el-col>
                
            </el-row>
        </el-form>
        <div class="save-button-container">
            <el-button type="primary" @click="saveNotificationData">保存弃电接收百分比</el-button>
        </div>
    </div>
</template>
<script lang="ts" setup>
    import { ref, reactive } from 'vue'
    import { ElMessage, ElMessageBox } from 'element-plus'
    import { getDataClassifyDetail, updateDataClassify } from '@/api/port'
    import { toRaw } from 'vue'
    
    // ========================================================================================
    // 模块5: 弃电接收百分比配置
    // ========================================================================================

    // 弃电接收百分比表单
    const notificationForm = reactive({
        agriculture: 0, // 农业
        logistics: 0,   // 物流
        party: 0,       // 环保
        env: 0,         // 环境
    })

    // 弃电接收百分比验证规则
    const notificationRules = {
        agriculture: [{ required: true, message: '农业不能为空', trigger: 'blur' }],
        logistics: [{ required: true, message: '物流不能为空', trigger: 'blur' }],
        party: [{ required: true, message: '环保不能为空', trigger: 'blur' }],
        env: [{ required: true, message: '环境不能为空', trigger: 'blur' }],
    }

    // 弃电接收百分比表单引用
    const notificationFormRef = ref()

    // 保存弃电接收百分比数据
    const saveNotificationData = async () => {
        if (!notificationFormRef.value) return
        
        try {
            await notificationFormRef.value.validate()
            await updateDataClassify({
                id: 2,
                key: 'module5',
                value: notificationForm
            })
            console.log('保存弃电接收百分比:', notificationForm)
            ElMessage.success('弃电接收百分比保存成功')
        } catch (error) {
            ElMessage.warning('请填写完整的表单信息')
        }
    }

    // 初始化数据
    const init = (moduleData: any) => {
        notificationForm.agriculture = moduleData.agriculture
        notificationForm.logistics = moduleData.logistics
        notificationForm.party = moduleData.party
        notificationForm.env = moduleData.env
    }

    defineExpose({
        init
    })

</script>
<style lang="less" scoped>

</style>